<template>
  <div class="inner">
    <el-tabs v-model="tabActiveName" type="card" stretch @tab-click="handleTabClick">
      <!-- 仓位信息 -->
      <el-tab-pane label="仓位信息" name="first">
        <div class="flexContent" v-show="!isShowMoreAdd">
          <div class="top">
            <p class="line"><span>区域名称：</span>{{ childrenData.name }}</p>
            <p class="line"><span>区域编码：</span>{{ childrenData.code }}</p>
          </div>
          <div class="center">
            <el-button class="addBtn" @click="positionShowModel" :disabled="!Boolean(warehouseId)"
              v-has="'addpos'">新增仓位</el-button>
            <el-button class="addBtn" @click="isShowMoreAdd = true" style="width: 120px;" :disabled="!Boolean(warehouseId)"
              v-has="'addpos'">批量新增仓位</el-button>
            <el-button class="delBtn" :disabled="!selectNum" @click="$delFn('仓位', delPositionById)"
              v-has="'delpos'">批量删除</el-button>
            已选中 {{ selectNum }} 行
          </div>
          <div class="table">
            <el-table border class="tablebox" ref="tableFirst" :data="tableData" style="width: 100%" height="100%"
                @selection-change="handleSelectionChange" size="medium">
                <el-table-column align="center" type="selection" width="55">
                </el-table-column>
                <el-table-column align="center" prop="name" label="仓位名称">
                </el-table-column>
                <el-table-column align="center" prop="code" label="仓位编码">
                </el-table-column>
                <el-table-column align="center" prop="aisleName" label="通道名称">
                </el-table-column>
                <el-table-column align="center" fixed="right" label="操作" width="200"
                  v-if="$showFn(['delpos', 'editpos'])">
                  <template slot-scope="scope">
                    <el-button @click="positionShowModel(scope.row)" type="text" v-has="'editpos'">修改</el-button>
                    <el-button @click="$delFn('仓位', delPositionById, scope.row.id)" type="text" style="color: red"
                      v-has="'delpos'">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
          </div>
          <div class="pagination" style="padding-top:20px;">
            <el-pagination :current-page.sync="page.pageNum" :page-sizes="$pageSizes" :page-size.sync="page.pageSize"
              background layout="total, ->,sizes, prev, pager, next, jumper" :total="page.total"
              @size-change="pageSizeChange" @current-change="getRegionDetail" />
          </div>
        </div>
        <div class="flexContent" v-show="isShowMoreAdd">
          <div>
            <el-form ref="formData" @submit.native.prevent :model="diaForm" :rules="diaRules">
              <el-form-item prop="aisleId" label="通道名称">
                <el-select v-model="diaForm.aisleId" style="margin-bottom: 10px;" placeholder="请选择通道" filterable
                  popper-class="eloption">
                  <el-option v-for="item in aisleOptions" :key="item.id" :value="item.id" :label="item.name" />
                </el-select>
              </el-form-item> 
              <el-button class="addBtn" @click="addcodeFn">增加仓位</el-button>

              <el-table @cell-mouse-enter="handleCellEnter" @cell-mouse-leave="handleCellLeave" border
                highlight-current-row ref="tables" :data="diaForm.codeData" class="tablebox" height="470px"
                size="medium">
                <el-table-column align="center" type="index" label="序号" width="80" />
                <el-table-column align="center" prop="name" label="仓位名称" width="300">
                  <template slot-scope="scope">
                    <el-form-item :prop="'codeData.' + scope.$index + '.name'" :rules="diaRules.name">
                      <el-input v-clearEmoji :id="'goodsQty' + scope.$index" v-model.trim="scope.row.name"
                        placeholder="" class="group-inp" size="small" style="width: 100%" />
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="code" label="仓位编码">
                  <template slot-scope="scope">
                    <el-form-item :prop="'codeData.' + scope.$index + '.code'" :rules="diaRules.code">
                      <el-input v-clearEmoji ref="inputaldQty" v-model.trim="scope.row.code" placeholder=""
                        class="group-inp" size="small" style="width: 100%" />
                    </el-form-item>
                  </template>
                  <!-- <template slot-scope="scope" v-if="routerType === 'detail'">
                    </template> -->
                </el-table-column>
                <el-table-column align="center" label="操作" width="150">
                  <template slot-scope="scope">
                    <!-- 删除 -->
                    <i class="el-icon-delete" style="cursor: pointer;"
                      @click.stop="delCode(scope.row, scope.$index)"></i>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
            <div style="padding-top: 20px;">
              <el-button class="addBtn" @click="confirmPositionList">新增</el-button>
              <el-button class="celBtn" size="small" @click="cancelPositionList">取消</el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!-- 商品信息 -->
      <el-tab-pane label="商品信息" name="second">
        <div class="flexContent">
          <div class="top">
            <p class="line"><span>区域名称：</span>{{ childrenData.name }}</p>
            <p class="line"><span>区域编码：</span>{{ childrenData.code }}</p>
          </div>
          <div class="center">
            <el-button class="addBtn" @click="goodsShowModel" v-has="'addgoods'">添加商品</el-button>
            <el-button class="delBtn" size="small" :disabled="!selectNum" @click="$delFn('区域下的商品', delGoodsById)"
              v-has="'delgoods'">批量删除</el-button>
            已选中 {{ selectNum }} 行
          </div>
          <div style="display: flex;align-items: center;margin-bottom: 10px">
            商品：<el-input v-clearEmoji v-model.trim="searchName" size="small" clearable @keyup.enter.native="searchFn" placeholder="请输入助记符/名称/条码" style="width: 30%;" @clear="clearSearch"/>
          </div>
          <div class="table">
            <el-table border ref="tableSecond" class="tablebox" :data="tableData" size="medium" style="width: 100%" height="100%"
                @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" width="55">
                </el-table-column>
                <el-table-column align="center" prop="name" label="商品信息">
                </el-table-column>
                <el-table-column align="center" prop="standard" label="规格">
                </el-table-column>
                <el-table-column align="center" prop="unitName" label="单位">
                </el-table-column>
                <el-table-column align="center" prop="firstCode" label="条码">
                </el-table-column>
                <el-table-column align="center" prop="producer" label="产地">
                </el-table-column>
                <el-table-column align="center" fixed="right" label="操作" width="200"
                  v-if="$showFn(['delgoods', 'editgoods'])">
                  <template slot-scope="scope">
                    <!-- $delFn('仓位', delPositionById) -->
                    <el-button @click="showGoodsEditModel(scope.row)" type="text" v-has="'editgoods'">修改</el-button>
                    <el-button @click="
                      $delFn(
                        '区域下的商品',
                        delGoodsById,
                        scope.row.id,
                        scope.row.commodityId
                      )
                      " type="text" style="color: red" v-has="'delgoods'">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
          </div>
          <div class="pagination" style="padding-top:20px;">
            <el-pagination :current-page.sync="page.pageNum" background :page-sizes="$pageSizes"
              :page-size.sync="page.pageSize" :pager-count="5" layout="total,->, sizes, prev, pager, next, jumper" :total="page.total"
              @size-change="pageSizeChange" @current-change="getRegionDetail" />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 添加或修改仓位的弹窗 -->
    <el-dialog destroy-on-close :title="positionId == '' ? '新增货架位' : '修改货架位'" :visible.sync="positionAddOrEditDialog"
      width="30%">
      <el-form ref="positionForm" :model="positionForm" :rules="positionRules" label-width="100px">
        <el-form-item label="仓位名称：" prop="name">
          <el-input v-clearEmoji v-model.trim="positionForm.name" placeholder="请输入..."></el-input>
        </el-form-item>
        <el-form-item label="仓位编码：" prop="code">
          <el-input v-clearEmoji v-model.trim="positionForm.code" placeholder="请输入..."></el-input>
        </el-form-item>
        <el-form-item label="通道名称：" prop="aisleId">
          <el-select v-model.trim="positionForm.aisleId" placeholder="请选择通道" clearable filterable
            popper-class="eloption">
            <el-option v-for="item in aisleOptions" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
          <!-- 通道组无法回显的问题 -->
          <!-- <el-cascader v-model="positionForm.aisleId" :props="lazyAisle" style="width:100%" placeholder="请选择通道"></el-cascader> -->
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button class="celBtn" @click="positionCancleDialog">取 消</el-button>
        <el-button class="addBtn" @click="positionSubmit('positionForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加商品的弹窗 -->
    <el-dialog destroy-on-close title="添加商品" :visible.sync="goodsAddDialog" width="60%" :close-on-click-modal="false">
      <div class="dinner">
        <div class="left">
          <div class="tp">
            <div class="flex">
              <div>
                <el-input v-clearEmoji v-model.trim="search.name" placeholder="助记符/名称/条码" clearable
                  style="width: 80%; margin-right: 20px" @keyup.enter.native="getGoodsTableList"></el-input>
              </div>
              <div>
                <el-cascader ref="cascaderRef" v-model="search.categoryId" filterable clearable placeholder="请选择商品分类"
                  :options="options" style="width: 80%;" @change="categoryChange" :props="{
                    value: 'id',
                    label: 'name',
                    checkStrictly: true,
                    emitPath: false,
                  }"></el-cascader>
              </div>
              <div>
                <el-button @click="getGoodsTableList">筛选</el-button>
              </div>
            </div>
            <el-table border ref="multipleTable" :data="goodsTableData" style="width: 100%"
              :row-class-name="tableRowClassName" max-height="337" size="medium" :row-key="getRowKeys"
              :header-cell-class-name="cellClass" @row-click="handlerClick" @selection-change="handleSelectionChanges">
              <el-table-column align="center" type="selection" width="55" :selectable="selectable">
              </el-table-column>
              <el-table-column align="center" prop="name" label="商品名称"
                :min-width="elTableAdaptationWidth('name', goodsTableData)">
              </el-table-column>
              <el-table-column align="center" prop="firstCode" label="商品条码">
              </el-table-column>
              <el-table-column align="center" prop="mnemonic" label="助记符">
              </el-table-column>
              <!-- <el-table-column align="center" prop="producer" label="产地"/> -->
            </el-table>
          </div>
          <div>
            <el-pagination background :current-page.sync="pageT.pageNum" :page-sizes="$pageSizes"
              :page-size.sync="pageT.pageSize" :pager-count="5" layout="total, ->,prev, pager, next, sizes" :total="pageT.total"
              @size-change="changeGoodsPageSize" @current-change="getGoodsTableList" />
          </div>
        </div>
        <div class="right" ref="rightBox">
          <div class="title">已选商品</div>
          <div class="list">
            <div v-for="o in selectList" :key="o.id" class="item">
              <p>{{ o.name }}</p>
              <i class="el-icon-close" style="font-size: 24px" @click="delSelection(o.id)"></i>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button class="addBtn" style="width:120px" @click="addSelectGoods">添加选中商品</el-button>
        <el-button class="addBtn" @click="bindRegionGoods">确 定</el-button>
        <el-button class="celBtn" @click="goodsCancleDialog">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 修改商品区域的弹窗 -->
    <el-dialog destroy-on-close title="移动至目标区域" :visible.sync="goodsEditDialog" width="30%">
      <div class="edit">
        目标区域：
        <el-select v-model="editRegionId" placeholder="请选择目标区域" style="width: 70%">
          <el-option v-for="item in regionList" :key="item.id" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="celBtn" @click="cancleEdit">取 消</el-button>
        <el-button class="addBtn" @click="editGoodsRegion">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqRegionPositionDetail,
  reqRegionCommodityDetail,
  reqAddRegionPosition,
  reqEditRegionPosition,
  reqDelPositionById,
  reqGoodsCategory,
  reqAddGoodsTableList,
  reqAddGoodsForRegion,
  reqEditRegionGoods,
  reqRegionList,
  reqDelGoodsById,
  reqAisleListById,
} from "@/api/warehouse";
import { reqAisleGroupListInfo, reqAisleByAisleGroupId, reqBatchAddPosition } from "@/api/storage";
export default {
  name: "ChildrenTreeNode",
  // 区域ID
  props: ["childrenId"],
  data() {
    return {
      // #region
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      // 仓库ID
      warehouseId: "",
      // tab选项类型
      tabActiveName: "first",
      childrenData: {},
      // 当前选中数量
      selectNum: 0,
      idList: [],

      // 仓位添加对应id
      positionId: "",
      // 仓位添加弹窗
      positionAddOrEditDialog: false,
      // 仓位添加表单
      positionForm: {
        name: "",
        code: "",
        aisleId: "",
      },
      lazyAisle: {
        lazy: true,
        emitPath: false,
        lazyLoad: async (node, resolve) => {
          if (node.level == 0) {
            console.log(this);
            let res = await reqAisleGroupListInfo({
              regionId: this.childrenId,
            });
            if (res.code === 200) {
              const nodes = res.data.map((item) => ({
                value: item.id,
                label: item.name,
                leaf: node.level == 1,
              }));
              resolve(nodes);
            }
          } else {
            let groupId = node.data.value;
            let res = await reqAisleByAisleGroupId({ groupId: groupId });
            if (res.code === 200) {
              const nodes = res.data.map((item) => ({
                value: item.id,
                label: item.name,
                leaf: node.level == 1,
              }));
              resolve(nodes);
            }
          }
        },
      },
      // 通道列表
      aisleOptions: [],
      positionRules: {
        name: [
          {
            required: true,
            message: "请输入仓位名称",
            trigger: "blur",
          },
          {
            min: 0,
            max: 15,
            message: "仓位名称长度不能超过15个字符",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入仓位编码",
            trigger: "blur",
          },
          {
            min: 0,
            max: 15,
            message: "仓位编码长度不能超过15位数字",
            trigger: "blur",
          },
        ],
        aisleId: [
          {
            required: true,
            message: "请选择通道",
            trigger: "blur",
          },
        ],
      },

      // 商品信息操作的弹窗
      goodsAddDialog: false,
      searchName: '',
      // 穿梭框的分页
      pageT: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      // 穿梭框搜搜
      search: {
        name: "",
        categoryId: "",
      },
      // 级联选择
      options: [],
      // 表格数据
      goodsTableData: [],
      // 右侧数据
      selectList: [],
      // 选中的数据
      multipleSelection: [],
      // 隐藏全选按钮
      disableSelection: false,

      // 区域列表
      regionList: [],
      // 商品id
      goodsId: "",
      // 修改的区域
      editRegionId: "",
      goodsEditDialog: false,
      // 商品ID
      commodityIdList: [],
      commodityId: "",
      isSearch:false,

      // #endregion
      // 批量新增数据
      isShowMoreAdd: false,
      moreAddPositionId: '',
      diaForm: {
        codeData: [],
        aisleId: ''
      },
      diaRules: {
        name: [
          {
            required: true,
            message: "请输入仓位名称",
            trigger: "blur",
          },
          {
            min: 0,
            max: 15,
            message: "仓位名称长度不能超过15个字符",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入仓位编码",
            trigger: "blur",
          },
          {
            min: 0,
            max: 15,
            message: "仓位编码长度不能超过15位数字",
            trigger: "blur",
          },
        ],
        aisleId: [
          {
            required: true,
            message: "请选择通道",
            trigger: "blur",
          },
        ]
      },
    };
  },
  // #region
  computed: {
    tableData() {
      if (this.childrenData.pageInfo) return this.childrenData.pageInfo.list;
      else return [];
    },
  },
  watch: {
    tabActiveName(n,o){
      if(n == 'second'){
        this.$nextTick(()=>{
          this.$refs.tableSecond.doLayout();
        })
      }else if(n == 'first'){
        this.$nextTick(()=>{
          this.$refs.tableFirst.doLayout();
        })
      }
    },
    childrenId: {
      immediate: true,
      handler() {
        this.tabActiveName = "first";
        this.isShowMoreAdd = false;
        this.diaForm.codeData = [];
        this.diaForm.aisleId = '';
        this.page = {
          pageNum: 1,
          pageSize: 20,
          total: 0,
        }
        this.pageT = {
          pageNum: 1,
          pageSize: 20,
          total: 0,
        }
        this.searchName = '';
        this.getAisleListById();
        this.getRegionDetail();
      },
    },
  },
  mounted() {
    this.getAisleListById();
  },
  // #endregion
  methods: {
    // #region
    async getRegionDetail() {
      let { childrenId, tabActiveName,searchName } = this;
      let { pageNum, pageSize } = this.page;
      let res = {};
      if (tabActiveName === "first") {
        res = await reqRegionPositionDetail({
          id: childrenId,
          pageNum,
          pageSize,
        });
      } else {
        if(this.isSearch === false) this.searchName = '';
        res = await reqRegionCommodityDetail({
          id: childrenId,
          pageNum,
          pageSize,
          name:this.searchName
        });
      }
      if (res.code === 200) {
        this.childrenData = res.data;
        this.page.total = res.data.pageInfo.total;
        this.warehouseId = res.data.warehouseId;
      }
    },
    searchFn(){
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };
      this.isSearch = true;
      this.getRegionDetail();
    },
    clearSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };
      this.isSearch = false;
      this.getRegionDetail();
    },
    pageSizeChange() {
      this.page.pageNum = 1;
      this.getRegionDetail();
    },
    // 显示选中几行
    handleSelectionChange(selectList) {
      this.commodityIdList = selectList.map((item) => item.commodityId);
      this.idList = selectList.map((item) => item.id);
      this.selectNum = selectList.length;
    },
    // tab切换
    handleTabClick() {
      // 切换tab的时候让分页回到最开始的状态
      this.page.pageNum = 1;
      this.page.pageSize = 20;
      this.page.total = 0;
      this.childrenData = {};
      this.selectNum = 0;
      this.getRegionDetail();
    },
    // 添加或修改
    positionShowModel(positionObj) {
      this.getAisleListById();
      if (positionObj.id !== undefined) {
        this.positionId = positionObj.id;
        this.positionForm = {
          name: positionObj.name,
          code: positionObj.code,
          aisleId: positionObj.aisleId,
        };
      } else {
        this.positionId = "";
        this.positionForm = { name: "", code: "", aisleId: "" };
      }
      this.positionAddOrEditDialog = true;
    },
    // 查询区域下的通道
    async getAisleListById() {
      let res = await reqAisleListById({ regionId: this.childrenId });
      if (res.code === 200) {
        this.aisleOptions = res.data;
      }
    },
    // 取消弹窗
    positionCancleDialog() {
      this.positionAddOrEditDialog = false;
    },
    // 表单提交
    positionSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let { positionId, warehouseId, childrenId } = this;
          let obj = { ...this.positionForm, warehouseId, regionId: childrenId };
          let res = {};
          if (positionId) {
            res = await reqEditRegionPosition({ id: positionId, ...obj });
          } else {
            res = await reqAddRegionPosition(obj);
          }
          if (res.code === 200) {
            this.$message.success(positionId ? "修改成功" : "添加成功");
            this.positionAddOrEditDialog = false;
            // 重新加载树
            this.$emit("getWarehouseTreeList");
            // 重新加载列表
            this.getRegionDetail();
          } else {
            // this.$message.error(res.message)
          }
        } else {
          this.$message.warning("请检查填写的信息");
          return false;
        }
      });
    },
    // 删除仓位
    async delPositionById(id) {
      let res = {};
      if (typeof id == "string") {
        res = await reqDelPositionById({ idList: [id] });
      } else {
        res = await reqDelPositionById({ idList: this.idList });
      }
      if (res.code === 200) {
        this.$message.success("删除成功");
        if (
          (this.tableData.length === this.idList.length ||
            this.tableData.length === 1) &&
          this.page.pageNum > 1
        )
          this.page.pageNum--;
        this.idList = [];
        // 重新加载树
        this.$emit("getWarehouseTreeList");
        // 重新加载列表
        this.getRegionDetail();
      } else {
        // this.$message.error(res.message)
      }
    },

    getRowKeys(row) {
      return row.id;
    },
    // 表格数据
    async getGoodsTableList() {
      let { warehouseId } = this;
      let { name, categoryId } = this.search;
      let level = 1;
      let { pageNum, pageSize } = this.pageT;
      let res = await reqAddGoodsTableList({
        warehouseId,
        categoryId,
        level,
        name,
        pageNum,
        pageSize,
      });
      if (res.code === 200) {
        this.goodsTableData = res.data.list;
        this.pageT.total = res.data.total;
        // this.handChangePageSelect();
        // this.goodsTableData = res.data;
        // this.page.total = res.data.pageInfo.total;
        // this.warehouseId = res.data.warehouseId;
      }
    },
    changeGoodsPageSize() {
      this.pageT.pageNum = 1;
      this.getGoodsTableList();
    },
    // 商品分类
    async getGoodsCategory() {
      let res = await reqGoodsCategory();
      if (res.code === 200) {
        this.options = res.data;
      }
    },
    // 通过商品分类搜素
    categoryChange(e) {
      const nodes = this.$refs.cascaderRef.getCheckedNodes();
      this.search.level = nodes[0]?.level;
    },
    // 商品添加或修改
    goodsShowModel() {
      this.search = { level: "", categoryId: "", name: "" };
      this.selectList = [];
      this.multipleSelection = [];
      this.goodsTableData = [];
      this.goodsAddDialog = true;
      this.getGoodsTableList();
      this.getGoodsCategory();
    },
    // 添加选中商品到右侧列表
    addSelectGoods() {
      this.multipleSelection.forEach((litem) => {
        if (!this.selectList.find((obj) => obj.id === litem.id)) {
          this.selectList.push(litem);
        }
      });
      this.$nextTick(() => {
        this.$refs.rightBox.scrollTo(0, this.$refs.rightBox.scrollHeight);
      });
    },
    // 商品取消弹窗
    goodsCancleDialog() {
      this.goodsAddDialog = false;
      this.pageT.pageNum = 1;
      this.pageT.pageSize = 20;
    },
    // 选中列样式
    tableRowClassName({ row, rowIndex }) {
      for (let i = 0; i < this.selectList.length; i++) {
        let item = this.selectList[i];
        if (item.id === row.id) {
          return "warning-row";
        }
      }
      return "";
    },
    handlerClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    // 选中事件
    handleSelectionChanges(val) {
      this.multipleSelection = val;
    },
    // 复选框禁用
    selectable(row, rowIndex) {
      for (let i = 0; i < this.selectList.length; i++) {
        let item = this.selectList[i];
        if (item.id === row.id) {
          return false;
        }
      }
      return true;
    },
    // 全选按钮禁用
    cellClass(row) {
      if (this.disableSelection) {
        if (row.columnIndex === 0) {
          return "disableSelection";
        }
      }
    },
    // 删除选中
    delSelection(id) {
      this.selectList = this.selectList.filter((item) => {
        if (item.id !== id) {
          return true;
        } else {
          let index = this.goodsTableData.findIndex(it => it.id === id)
          // 不能用上面的item，因为指向的不是一个地址，所以要用表格中的数据
          this.$refs.multipleTable.toggleRowSelection(this.goodsTableData[index], false)
          return false;
        }
      });
      this.multipleSelection = [...this.multipleSelection, ...this.selectList];
    },
    // 给区域添加商品
    async bindRegionGoods() {
      let {
        warehouseId,
        childrenId: regionId,
        selectList: commodityList,
      } = this;
      if (commodityList.length === 0) {
        this.$message.error("请选中要添加的数据");
        return;
      }
      let res = await reqAddGoodsForRegion({
        warehouseId,
        regionId,
        commodityList,
      });
      if (res.code === 200) {
        this.$message.success("添加成功");
        this.getRegionDetail();
        this.goodsAddDialog = false;
      } else {
        this.$message.error(res.message + ",请刷新后重试");
      }
      this.pageT.pageNum = 1;
      this.pageT.pageSize = 20;
    },

    // 查询仓库下区域列表
    async getRegionList() {
      let { warehouseId } = this;
      let res = await reqRegionList({ warehouseId });
      if (res.code === 200) {
        this.regionList = res.data.map((item) => ({
          label: item.name,
          value: item.id,
        }));
      }
    },
    // 删除区域商品
    async delGoodsById(id, commodityId) {
      let res = {};
      let { warehouseId, commodityIdList, idList } = this;
      if (typeof id == "string") {
        res = await reqDelGoodsById({
          warehouseId,
          commodityIdList: [commodityId],
          idList: [id],
        });
      } else {
        res = await reqDelGoodsById({ warehouseId, idList, commodityIdList });
      }
      if (res.code === 200) {
        this.$message.success("删除成功");
        if (
          (this.tableData.length === this.idList.length ||
            this.tableData.length === 1) &&
          this.page.pageNum > 1
        )
          this.page.pageNum--;
        this.idList = [];
        // 重新加载列表
        this.getRegionDetail();
      } else {
        // this.$message.error(res.message)
      }
    },
    // 弹窗并初始化
    async showGoodsEditModel(goodsObj) {
      await this.getRegionList();
      let { childrenId } = this;
      this.editRegionId = childrenId;
      this.goodsId = goodsObj.id;
      this.goodsEditDialog = true;
    },
    // 取消修改
    cancleEdit() {
      this.goodsEditDialog = false;
    },
    // 提交修改
    async editGoodsRegion() {
      if (this.editRegionId == "") {
        this.$message.error("请选择目标区域");
        return;
      }
      let { editRegionId, goodsId } = this;
      let res = await reqEditRegionGoods({
        regionId: editRegionId,
        id: goodsId,
      });
      if (res.code === 200) {
        this.$message.success("修改成功");
        this.goodsEditDialog = false;
        // 重新加载列表
        this.getRegionDetail();
      } else {
        // this.$message.error(res.message)
      }
    },


    // #endregion



    handleCellEnter(row, column, cell, event) {
      row.isEdit = true
    },
    /** 鼠标移出cell */
    handleCellLeave(row, column, cell, event) {
      row.isEdit = false
    },
    // 删除添加仓位
    delCode(row, index) {
      this.diaForm.codeData.splice(index, 1)
    },
    addcodeFn() {
      this.diaForm.codeData.push({ name: '', code: '' })
      const length = this.diaForm.codeData.length - 1
      console.log('this.codeData');
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.tables.bodyWrapper.scrollTop = this.$refs.tables.bodyWrapper.scrollHeight;
          document.getElementById('goodsQty' + length).focus()
          // this.$refs['goodsQty' + (length)].focus()
        }, 500)
      })
    },
    confirmPositionList() {
      if (this.diaForm.codeData.length > 0) {

        this.$refs.formData.validate(async (isOk) => {
          if (isOk) {
            console.log('this.diaForm.codeData', this.diaForm.codeData);
            console.log({ warehouseId: this.warehouseId, regionId: this.childrenId, aisleId: this.diaForm.aisleId, list: this.diaForm.codeData });
            const res = await reqBatchAddPosition({ warehouseId: this.warehouseId, regionId: this.childrenId, aisleId: this.diaForm.aisleId, list: this.diaForm.codeData })
            if (res.code === 200) {
              this.$message.success('添加成功')
              this.diaForm.codeData = []
              this.diaForm.aisleId = ''
              this.isShowMoreAdd = false
              this.page = {
                pageNum: 1,
                pageSize: 20
              }
              this.getRegionDetail()
              this.$emit("getWarehouseTreeList");
            }
          }
        })
      } else {
        this.$message.warning('请先添加仓位')
      }
    },
    cancelPositionList() {
      this.diaForm.codeData = []
      this.diaForm.aisleId = ''
      this.isShowMoreAdd = false
      this.page = {
        pageNum: 1,
        pageSize: 20
      }
      this.getRegionDetail()
    }
  },
};
</script>
<style lang="scss" scoped>
.el-table .warning-row {
  background: #f5f7fa;
  color: #ccc;
}

.el-table .disableSelection .cell .el-checkbox__inner {
  display: none;
  position: relative;
}

.el-table .disableSelection .cell::before {
  content: "";
  position: absolute;
}

.el-tabs {
  display: flex;
  flex-direction: column;
}

.el-tab-pane {
  height: 100%;
}

::v-deep .el-tabs__content {
  flex: 1;
}
</style>
<style lang="scss" scoped>
.inner {
  padding: 20px;
  width: 100%;

  .el-tabs {
    width: 100%;
  }

  .flexContent {
    padding: 0;

    .top {
      display: flex;

      .line {
        width: 50%;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.el-table .warning-row {
  background: #f5f7fa;
  color: #ccc;
}

.el-table .disableSelection .cell .el-checkbox__inner {
  display: none;
  position: relative;
}

.el-table .disableSelection .cell::before {
  content: "";
  position: absolute;
}

.dinner {
  display: flex;

  .left {
    margin-right: 20px;
    border: 1px solid #a9a9a9;
    border-radius: 4px;
    padding: 10px;
    min-height: 400px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .el-cascader {
    .el-input {
      width: 100%
    }
  }

  .right {
    width: 30%;
    height: 450px;
    overflow-y: auto;
    border: 1px solid #a9a9a9;
    border-radius: 4px;
    padding: 10px;

    /* 定义滚动条的样式 */
    &::-webkit-scrollbar {
      width: 8px;
      /* 滚动条宽度 */
    }

    /* 定义滚动条轨道的样式 */
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      /* 轨道背景颜色 */
    }

    /* 定义滚动条滑块的样式 */
    &::-webkit-scrollbar-thumb {
      background: #b6b6b6;
      /* 滑块颜色 */
    }

    /* 定义滚动条滑块悬停时的样式 */
    &::-webkit-scrollbar-thumb:hover {
      background: #a0a0a0;
      /* 滑块悬停时的颜色 */
    }

    .title {
      padding: 10px 0;
      margin-bottom: 10px;
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid #ccc;
    }

    .list {
      font-size: 16px;

      .item {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        align-items: center;

        p {
          margin: 0;
        }

        i {
          cursor: pointer;
        }
      }
    }
  }
}
</style>